<template>
    <el-card class="box">
        <div><span>评论  {{sum.comments}} </span></div>
        <div class="box_1">
            <div class="box_11">
                <el-avatar
                    :src="sum.src"
                ></el-avatar>
            </div>
            <div class="box_22">
                <el-input 
                    :rows="3"
                    placeholder="评论"
                    type="textarea"
                />
            </div>
            <div class="box_33">
                <el-button>添加</el-button>
            </div>
        </div>
        <div class="ko"></div>
        <div class="box_2">
            <div class="nn">
                <div class="box_21">
                    <el-avatar
                        :src="sum.src"
                    ></el-avatar>
                </div>
                <div class="box_22">
                    <span>{{sum.zuo}}</span>
                </div>
                <div class="box_23">
                    <span>
                        你这个真好呀
                    </span>
                </div>
                <div class="box_24">
                    <span class="hf">回复</span>
                    <span>{{sum.time}}</span>
                </div>
            </div>
        </div>
    </el-card>
</template>
<script>
import { reactive } from 'vue'
export default {
    props:['sum'],
    setup(){
        const shuju = reactive({
            rows:2
        })



        return{
            shuju
        }
    }
}
</script>
<style lang="less" scoped>
    .box{
        width: 100%;
        height: 100%;
        .nn{
            margin-bottom: 90px;
        }
        .box_1{
            margin-top: 20px;
            position: relative;    
            .box_11{
                width: 8%;
                text-align: center;
            }
            .box_22{
                width: 82%;
                position: absolute;
                left: 7%;
                top: 2px;
            }
            .box_33{
                width: 10%;
                position: absolute;
                right: 0;
                bottom: -30px;
            }
        }
        .ko{
            width: 88%;
            border-bottom: 1px solid rgb(223, 223, 223);
            margin-top: 60px;
            margin-left: 98px;
        }
        .box_2{
            margin-top: 30px;
            position: relative;
            .box_21{
                width: 8%;
                text-align: center;
            }
            .box_22{
                width: 90%;
                position: absolute;
                left: 7%;
                top: 10px;
                span{
                    font-size: 15px;
                }
            }
            .box_23{
                width: 90%;
                position: absolute;
                left: 7%;
                height: 200px;
            }
            .box_24{
                width: 90%;
                margin-top: 50px;
                position: absolute;
                left: 7%;
                .hf{
                    padding-right: 20px;
                }
            }
        }
    }
</style>
